<template>
  <div class="app-container">
    <!-- 查询课程 开始 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="courseQuery.title" placeholder="课程名称"/>
      </el-form-item>
    
    <!-- 讲师 -->
      <el-form-item label="课程讲师">
          <el-select
            v-model="courseQuery.teacherId"
            placeholder="请选择">
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"/>
          </el-select>
        </el-form-item>

      <!-- 一级分类 -->
    <el-form-item label="课程分类">
        <el-select
            v-model="courseQuery.subjectParentId"
            placeholder="一级分类" @change="subjectLevelOneChanged">

            <el-option
                v-for="subject in subjectOneList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>

        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="courseQuery.subjectId" placeholder="二级分类">
            <el-option
                v-for="subject in subjectTwoList"
                :key="subject.value"
                :label="subject.title"
                :value="subject.id"/>
        </el-select>
    </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      <el-button type="default" @click="resetData()">重置</el-button>
    </el-form>
    <!-- 查询 结束 -->

    <!-- 数据表格 开始 -->
    <el-table
        :data="list"
        border
        fit
        highlight-current-row
        row-class-name="myClassList">

    <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
        {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
    </el-table-column>

    <el-table-column label="课程信息" width="470" align="center">
        <template slot-scope="scope">
        <div class="info">
            <div class="pic">
            <img :src="scope.row.cover" alt="scope.row.title" width="150px">
            </div>
            <div class="title">
            <a href="">{{ scope.row.title }}</a>
            <p>{{ scope.row.lessonNum }}课时</p>
            </div>
        </div>
        </template>
    </el-table-column>

    <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
        {{ scope.row.gmtCreate.substr(0, 10) }}
        </template>
    </el-table-column>
    <el-table-column label="发布时间" align="center">
        <template slot-scope="scope">
        {{ scope.row.gmtModified.substr(0, 10) }}
        </template>
    </el-table-column>
    <el-table-column label="价格" width="100" align="center" >
        <template slot-scope="scope">
        {{ Number(scope.row.price) === 0 ? '免费' :
        '¥' + scope.row.price.toFixed(2) }}
        </template>
    </el-table-column>
    <el-table-column prop="buyCount" label="付费学员" width="100" align="center" >
        <template slot-scope="scope">
        {{ scope.row.buyCount }}人
        </template>
    </el-table-column>

    <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <router-link :to="'/course/cinfo/'+scope.row.id">
              <el-button type="text" size="mini" icon="el-icon-edit">编辑课程信息</el-button>
          </router-link>
          <router-link :to="'/course/chapter/'+scope.row.id">
              <el-button type="text" size="mini" icon="el-icon-edit">编辑课程大纲</el-button>
          </router-link>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
    :current-page="page"
    :page-size="limit"
    :total="total"
    style="padding: 30px 0; text-align: center;"
    layout="total, prev, pager, next, jumper"
    @current-change="fetchData"
    />
  <!-- 分页插件 结束 -->
  </div>
</template>
<script>
import coursePageApi from '@/api/edu/courserApi'
import teacherApi from '@/api/edu/teacher'
import subjectApi from '@/api/edu/subject'
export default {
    data(){
        return{
            // 课程查询对象
            courseQuery:{
                title:'',
                teacherId:'',
                subjectParentId:'',
                subjectId:''
            },
            list:null,
            subjectOneList:[], //一级分类
            subjectTwoList:[], //二级分类
            teacherList:[], //讲师列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 10, // 每页记录数
        }
    },
    created(){
        this.resetData() // 重置
        this.initSubjectOneList() //初始化一级分类列表
        this.initTeacherList() //初始化讲师列表
        this.fetchData() //获取所有数据列表
    },
    methods:{
      // 删除课程信息
      removeDataById(courseId){        
        this.$confirm('此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            return coursePageApi.deleteCourse(courseId)
        }).then(() => {
            this.fetchData() // 刷新页面数据
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
        }).catch((response) => { // 失败
            if (response === 'cancel') {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            }else{
              this.$message({
                    type: 'error',
                    message: '删除失败'
                })
            }
        })
      },  
        // 初始化讲师列表
        initTeacherList(){
            teacherApi.getList().then(res => {
                this.teacherList = res.data.items
            })
        },
        // 初始化一级分类列表
        initSubjectOneList(){
            subjectApi.getTreeSubject().then(res => {
                this.subjectOneList = res.data.list
            })
        },
        // 一级分类与二级分类关联事件
        subjectLevelOneChanged(value){
            // 遍历一级分类列表
            for(let i = 0; i < this.subjectOneList.length; i++){
                // 一级分类下面的二级分类
                if(this.subjectOneList[i].id === value){
                    this.subjectTwoList = this.subjectOneList[i].children
                }
            }
        },
        // 查询点击事件
        fetchData(page =1){
            this.page = page
            coursePageApi.getCoursePageList(this.page,this.limit,this.courseQuery).then(res => {
                if(res.code === 20000){
                  this.list = res.data.rows
                  this.total = res.data.total
                }
            })
        },
        // 重置按钮
        resetData(){
            this.courseQuery={}
            this.subjectTwoList = [] //二级分类列表
            this.fetchData()
        } 
    }
}
</script>
<style scoped>
.myClassList .info {
    width: 450px;
    overflow: hidden;
}
.myClassList .info .pic {
    width: 150px;
    height: 90px;
    overflow: hidden;
    float: left;
}
.myClassList .info .pic a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.myClassList .info .pic img {
    display: block;
    width: 100%;
}
.myClassList td .info .title {
    width: 280px;
    float: right;
    height: 90px;
}
.myClassList td .info .title a {
    display: block;
    height: 48px;
    line-height: 24px;
    overflow: hidden;
    color: #00baf2;
    margin-bottom: 12px;
}
.myClassList td .info .title p {
    line-height: 20px;
    margin-top: 5px;
    color: #818181;
}
</style>